<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-切换商品案例</title>
    <link rel="stylesheet" href="./09-切换商品案例.css">
    <script>
        window.onload=function () {
            // 鼠标移动切换
            let ulEle = document.getElementById("tab");
            let divEle = document.getElementById("products");
            let liArr = ulEle.children;
            for (let i = 0; i < liArr.length; i++) {
                let liEle = liArr[i];
                liEle.onmouseenter=function () {
                    // 先清除所有的上边框
                    for (let i = 0; i < liArr.length; i++) {
                        liArr[i].className="";
                    }
                    // 将鼠标进入的设置上边框
                    this.className="active";
                    // 设置图片隐藏
                    let imgArr = divEle.children;
                    // 将所有的图片类名改为空
                    for (let j = 0; j < imgArr.length; j++) {
                        imgArr[j].className="";
                    }
                    // 将鼠标指向的类名改为 show
                    imgArr[i].className="show";
                }
            }
        }
    </script>
</head>
<body>
<div class="main">
    <ul class="tab" id="tab">
        <!--设置class属性值为active，为了设置导航栏顶部的红色线条-->
        <li class="active"><a href="javascript:;">母婴用品</a></li>
        <li><a href="javascript:;">厨房用品</a></li>
        <li><a href="javascript:;">美容护肤</a></li>
        <li><a href="javascript:;">生活电器</a></li>
    </ul>
    <div class="products" id="products">
        <!--设置class属性值为show，为了显示出对应的商品图片-->
        <img class="show" src="../images/myyp.png" alt="母婴用品">
        <img src="../images/cfyp.png" alt="厨房用品">
        <img src="../images/mrhf.png" alt="美容护肤">
        <img src="../images/shdq.png" alt="生活电器">
    </div>
</div>
</body>
</html>